<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="newstudent" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="8" :offset="0">
            <el-form-item label="姓名">
              <el-input
                v-model="newstudent.name"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="性别">
              <el-select
                v-model="newstudent.sex"
                style="width: 100%"
                placeholder="请选择班级"
              >
                <el-option
                  v-for="item in sexOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="班级">
              <el-select
                v-model="newstudent.classId"
                style="width: 100%"
                placeholder="请选择班级"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.className"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8" :offset="0">
            <el-form-item label="电话" size="normal">
              <el-input
                v-model="newstudent.tel"
                placeholder=""
                size="normal"
                clearabl
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="身份证" size="normal">
              <el-input
                v-model="newstudent.manID"
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="城市" size="normal">
              <el-cascader
                size="small"
                :options="options"
                v-model="cityTextCN"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8" :offset="0">
            <el-form-item label="宿舍" size="normal">
              <el-select
                v-model="newstudent.dormId"
                style="width: 100%"
                placeholder="请选择宿舍"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="入学时间" size="normal">
              <el-date-picker
                style="width: 100%"
                v-model="newstudent.dormStartTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="离校时间" size="normal">
              <el-date-picker
                style="width: 100%"
                v-model="newstudent.dormEndTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-card shadow="never">
        <div slot="header">
          <span>补充信息</span>
        </div>
        <el-form :model="newstudent" size="normal">
          <el-row :gutter="24">
            <el-col :span="8" :offset="0">
              <el-form-item label="备用电话" style="text-align: center">
                <el-input v-model="newstudent.tel2"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="微信">
                <el-input v-model="newstudent.wx"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="QQ">
                <el-input v-model="newstudent.qq"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8" :offset="0">
              <el-form-item label="毕业院校">
                <el-input v-model="newstudent.school"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="工作">
                <el-input v-model="newstudent.job"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card shadow="never">
        <div slot="header">
          <span>交费信息</span>
          <el-button
            type="primary"
            style="margin-left: 30px"
            @click="costFormShow = !costFormShow"
            >{{ costFormShow ? "关闭交费信息" : "打开交费信息" }}</el-button
          >
        </div>
        <el-form
          :model="costForm"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
          v-show="costFormShow"
        >
          <el-form-item label="交费类型">
            <el-select v-model="costForm.costType">
              <el-option label="学费" value="0"> </el-option>
              <el-option label="住宿费" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额" size="normal">
            <el-input-number
              v-model="costForm.costValue"
              size="normal"
              label=""
              :min="1"
              :step="1"
              :controls="true"
              controls-position="both"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="缴费时间" size="normal">
            <el-date-picker
              v-model="costForm.costTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="2"
              v-model="costForm.costBak"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit1">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="costList" border stripe>
          <el-table-column
            prop="costType"
            label="交费类型"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="costValue"
            label="金额"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="costTime"
            label="交费时间"
            width="200"
          ></el-table-column>
          <el-table-column prop="costBak" label="备注"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: red"
                size="small"
                @click="removeCostItem(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addnew">确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
import HomeApi from "@/api/table/index";
export default {
  name: "stdetal",
  props: ["list"],
  data() {
    return {
      dialogVisible: false,
      list1: [],
      cityTextCN: [],
      costForm: {},
      costFormShow: false,
      costList: [],
      newstudent: {},
      cityText: [],
      city: [],
      sexOption: [
        {
          label: "男",
          value: "0",
        },
        {
          label: "女",
          value: "1",
        },
      ],
      options: regionDataPlus,
    };
  },
  created() {},
  methods: {
    //地市选择器
    handleChange(value) {
      if (value.length > 0) {
        console.log(value);
        this.city.push(value);
        // this.city = this.city1.join(",");
        value.forEach((item) => {
          this.cityText.push(CodeToText[item]);
          console.log(this.cityText);
          //this.cityText = this.cityTextCN.join(",");
        });
        console.log(this.cityTextCN);
      }
    },
    onSubmit1() {
      var newcostform = {};
      for (var item in this.costForm) {
        newcostform[item] = this.costForm[item];
      }
      newcostform.id = new Date().getTime();
      this.costList.push(newcostform);
      this.costForm = {};
    },
    removeCostItem(id) {
      console.log(this.costList);
      this.costList = this.costList.filter((item) => {
        item.id !== id;
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    opendetail() {
      this.dialogVisible = true;
    },
    openedit(id) {
      this.dialogVisible = true;
      HomeApi.studentdetail({ id }).then((res) => {
        console.log(res);
        this.newstudent = res.data;
        var str = res.data.city;
        this.cityTextCN = str.split(",");
        console.log(str);
      });
      this.getCostList(id);
    },
    getCostList(userId) {
      HomeApi.costlist({ userId }).then((res) => {
        console.log(res, "111");
      });
    },
    addnew() {
      var api = null;
      if (this.newstudent.id) {
        api = HomeApi.studentupdate;
      } else {
        api = HomeApi.studentsave;
      }
      var parms = {
        xyUser: {
          ...this.newstudent,
          cityText: this.cityText.join(","),
          city: this.city.join(","),
        },
      };
      api(parms).then((res) => {});
      this.$emit("getstudentlist");
      this.dialogVisible = false;
      this.newstudent = {};
      this.cityTextCN = [];
      this.$message.success("保存成功!");
    },
  },
};
</script>
<style scoped  lang='scss'>
</style>